<template>
  <div class="job-search-container">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-input placeholder="选择城市" v-model="searchQueryParam.workCity" style="width: 100%;">
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input placeholder="选择职位" v-model="searchQueryParam.targetPosition" style="width: 100%;">
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-input placeholder="搜索专业" v-model="searchQueryParam.major" style="width: 100%;">
          <template #append>
            <el-button type="primary"
                       @click="loadTalent">搜索</el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>
  </div>

  <div style="margin-top: 10px; height: 600px">
    <div v-if="talents.data.data.length === 0" style="text-align: center; margin-top: 20px;">
      暂无数据
    </div>
    <el-card style="margin-top: 5px;position: relative;background-color: #f5f7fa"
             v-for="(item, index) in talents.data.data" :key="index">
      <el-row>
        <div style="width: 300px">
          <el-row>
            <ul type="none">
              <li>
            <span style="font-size: 20px;">
              <b>
                {{item.nickname}}
              </b>
            </span>
              </li>
              <li>
              <span style="font-size: 15px">
                {{item.age}}岁
                <span v-if="item.jobStatus !==null">|</span>
                {{item.jobStatus}}
              </span>
              </li>
              <li>
              <span style="font-size: 15px">
                {{item.salary}}
              <span v-if="item.targetPosition !==null">|</span>
                {{item.targetPosition}}
              </span>
              </li>
            </ul>
          </el-row>
        </div>

        <el-row>
          <div style="width: 300px" v-for="(i, index) in item.educationExperiences" :key="index">
            <ul>
              <b>
                教育背景：
              </b>
              <li>
            <span style="font-size: 15px">
              {{i.startDate}} - {{i.endDate}}
            </span>
              </li>
              <li>
                {{i.schoolName}}
                {{i.degree}}
                {{i.major}}
              </li>
            </ul>
          </div>
        </el-row>

        <el-row>
          <div style="width: 300px" v-for="(i, index) in item.workExperiences" :key="index">
            <ul>
              <b>
                工作经历：
              </b>
              <li>
            <span style="font-size: 15px">
              {{i.startDate}} - {{i.endDate}}
            </span>
              </li>
              <li>
                {{i.companyName}}
                {{i.position}}
              </li>
            </ul>
          </div>
        </el-row>

        <el-row>
          <div style="width: 300px; padding-top: 30px;" >
            <el-button-group >
              <el-button type="primary" style="position: relative;left: 300px">
                去沟通
              </el-button>
            </el-button-group>
          </div>
        </el-row>
      </el-row>
    </el-card>
  </div>




  <div style="margin-top: 20px; text-align: center;">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-button style="margin-right: 40px;" :disabled="isPrevDisabled" @click="prevPage">
          上一页
        </el-button>
        <el-form inline style="display: inline-block; margin-right: 10px;margin-top: 5px">
          <el-form-item style="margin-top: 5px">
            第 <el-input type="number" v-model="searchQueryParam.pageNum" placeholder="1"
                         style="width: 80px; margin-right: 5px; margin-left: 5px;"/>
            页 / 共 {{totalPages}} 页
          </el-form-item>
        </el-form>
        <el-button :disabled="isNextDisabled" @click="nextPage">
          下一页
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue';
import axios from "axios";
import qs from "qs";

const pageNum = ref(1);
const pageSize = ref(4);
const talents = ref({
  data: {
    total: 0,
    data: []
  }
});
const total = ref(0);


const searchQueryParam = ref({
  pageNum:pageNum.value,
  pageSize:pageSize.value,
  workCity:'',
  targetPosition:'',
  major:''
})

const loadTalent = () => {
  let data = qs.stringify(searchQueryParam.value);
  axios.get(BASEURL+'/employee/getPageQueryTalent?'+ data).then((response)=>{
    if (response.data.code===2000){
      console.log("查询牛马成功:"+response.data.data);
      talents.value.data.data = response.data.data.data;
      total.value = response.data.data.total;
      searchQueryParam.value.major='';
      searchQueryParam.value.workCity='';
      searchQueryParam.value.targetPosition='';
      console.log("查询牛马成功:"+talents);
    }
  })
}
// 计算总页数
const totalPages = computed(() => {
  const dat =Math.ceil(total.value / pageSize.value);
  console.log("总页数:"+dat);
  console.log("总条数:"+total.value);

  console.log("每页条数:"+pageSize.value);

  return dat
});

const isPrevDisabled = computed(() => {
  return searchQueryParam.value.pageNum <= 1;
});

const isNextDisabled = computed(() => {
  return searchQueryParam.value.pageNum >= totalPages.value;
});

const prevPage = () => {
  if (searchQueryParam.value.pageNum > 1) {
    searchQueryParam.value.pageNum--;
    loadTalent();
  }
};

const nextPage = () => {
  if (searchQueryParam.value.pageNum < totalPages.value) {
    searchQueryParam.value.pageNum++;
    loadTalent();
  }
};
onMounted(()=>{

  loadTalent();
  console.log('总页数', totalPages.value)
})
</script>

<style scoped>
.job-search-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

</style>
